
<template>
  <div class="relative h-96 md:h-[600px] bg-gradient-to-br from-gray-100 to-gray-200">
    <div ref="container" class="w-full h-full"></div>
    
    <!-- 控制提示 -->
    <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-4 py-2 rounded-lg text-sm">
      <i class="fas fa-mouse mr-2"></i>
      拖动旋转 | 滚轮缩放
    </div>
    
    <!-- 加载提示 -->
    <div v-if="isLoading" class="absolute inset-0 flex items-center justify-center">
      <div class="text-center">
        <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-qinghua-blue mx-auto mb-4"></div>
        <p class="text-qinghua-gray">正在加载3D模型...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'

const container = ref(null)
const isLoading = ref(true)
let scene, camera, renderer, doll, controls
let animationId

onMounted(() => {
  initThreeJS()
  animate()
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  if (renderer) {
    renderer.dispose()
  }
})

const initThreeJS = () => {
  // 创建场景
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xf8fafc)

  // 创建相机
  camera = new THREE.PerspectiveCamera(
    75,
    container.value.clientWidth / container.value.clientHeight,
    0.1,
    1000
  )
  camera.position.z = 5

  // 创建渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
  renderer.shadowMap.enabled = true
  container.value.appendChild(renderer.domElement)

  // 创建光源
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6)
  scene.add(ambientLight)

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
  directionalLight.position.set(10, 10, 5)
  directionalLight.castShadow = true
  scene.add(directionalLight)

  // 创建青花瓷娃娃模型（使用几何体模拟）
  createDollModel()

  // 添加鼠标控制
  addMouseControls()

  // 窗口大小调整
  window.addEventListener('resize', onWindowResize)

  isLoading.value = false
}

const createDollModel = () => {
  // 创建娃娃组
  doll = new THREE.Group()

  // 身体 - 使用圆柱体模拟
  const bodyGeometry = new THREE.CylinderGeometry(1, 1.2, 2, 32)
  const bodyMaterial = new THREE.MeshPhongMaterial({
    color: 0x1e3a8a,
    shininess: 100,
    transparent: true,
    opacity: 0.9
  })
  const body = new THREE.Mesh(bodyGeometry, bodyMaterial)
  doll.add(body)

  // 头部 - 使用球体
  const headGeometry = new THREE.SphereGeometry(0.8, 32, 32)
  const headMaterial = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shininess: 100
  })
  const head = new THREE.Mesh(headGeometry, headMaterial)
  head.position.y = 1.5
  doll.add(head)

  // 添加青花瓷纹理装饰（使用简单的几何图案）
  addQinghuaPattern(body)

  scene.add(doll)
}

const addQinghuaPattern = (mesh) => {
  // 创建青花瓷纹理
  const canvas = document.createElement('canvas')
  canvas.width = 512
  canvas.height = 512
  const ctx = canvas.getContext('2d')

  // 绘制青花瓷纹理
  ctx.fillStyle = '#1e3a8a'
  ctx.fillRect(0, 0, 512, 512)

  // 绘制传统纹样
  ctx.strokeStyle = '#ffffff'
  ctx.lineWidth = 3
  
  // 绘制花卉图案
  for (let i = 0; i < 8; i++) {
    const angle = (i / 8) * Math.PI * 2
    const x = 256 + Math.cos(angle) * 100
    const y = 256 + Math.sin(angle) * 100
    
    ctx.beginPath()
    ctx.arc(x, y, 30, 0, Math.PI * 2)
    ctx.stroke()
  }

  const texture = new THREE.CanvasTexture(canvas)
  mesh.material.map = texture
  mesh.material.needsUpdate = true
}

const addMouseControls = () => {
  let mouseX = 0
  let mouseY = 0
  let targetRotationX = 0
  let targetRotationY = 0

  container.value.addEventListener('mousemove', (event) => {
    const rect = container.value.getBoundingClientRect()
    mouseX = ((event.clientX - rect.left) / rect.width) * 2 - 1
    mouseY = -((event.clientY - rect.top) / rect.height) * 2 + 1
    
    targetRotationY = mouseX * Math.PI
    targetRotationX = mouseY * Math.PI * 0.5
  })

  container.value.addEventListener('wheel', (event) => {
    camera.position.z += event.deltaY * 0.01
    camera.position.z = Math.max(2, Math.min(10, camera.position.z))
  })

  // 在动画循环中应用旋转
  const updateRotation = () => {
    if (doll) {
      doll.rotation.x += (targetRotationX - doll.rotation.x) * 0.05
      doll.rotation.y += (targetRotationY - doll.rotation.y) * 0.05
    }
  }

  // 替换原来的animate函数
  animate = () => {
    animationId = requestAnimationFrame(animate)
    updateRotation()
    renderer.render(scene, camera)
  }
}

const onWindowResize = () => {
  if (camera && renderer) {
    camera.aspect = container.value.clientWidth / container.value.clientHeight
    camera.updateProjectionMatrix()
    renderer.setSize(container.value.clientWidth, container.value.clientHeight)
  }
}

let animate = () => {
  animationId = requestAnimationFrame(animate)
  if (doll) {
    doll.rotation.y += 0.005
  }
  renderer.render(scene, camera)
}
</script>
